<template>
  <div class="app-container">
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>
    <el-card class="box-card">
      <div class="table-handle">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="onAdd">新增优惠券</el-button>
<!--        <el-button type="success" size="mini" icon="el-icon-user" @click="goToUserCoupon">用户优惠券</el-button>-->
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column label="优惠券名称" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.coupon_name }}
          </template>
        </el-table-column>

        <el-table-column label="优惠券类型" align="center" width="120">
          <template slot-scope="scope">
            <el-tag :type="getCouponTypeTag(scope.row.coupon_type)">
              {{ getCouponTypeText(scope.row.coupon_type) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="优惠内容" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.coupon_type === 1">
              <span>满{{ scope.row.min_amount }}减{{ scope.row.amount }}</span>
            </div>
            <div v-else-if="scope.row.coupon_type === 2">
              <span>{{ scope.row.discount }}折</span>
            </div>
            <div v-else-if="scope.row.coupon_type === 3">
              <span>无门槛减{{ scope.row.amount }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="生效时间" align="center" width="300">
          <template slot-scope="scope">
            <div>{{ scope.row.start_time }}</div>
            <div>至</div>
            <div>{{ scope.row.end_time }}</div>
          </template>
        </el-table-column>

        <el-table-column label="发放数量" prop="remain_count" align="center" width="120">
        </el-table-column>

        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_enabled ? 'success' : 'info'">
              {{ scope.row.is_enabled ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              style="color: #67C23A"
              @click="handleDistribute(scope.row)"
            >
              发放
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.is_enabled ? '禁用' : '启用' }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="优惠券名称" prop="coupon_name">
          <el-input v-model="form.coupon_name" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>
        
        <el-form-item label="优惠券类型" prop="coupon_type">
          <el-radio-group v-model="form.coupon_type">
            <el-radio :label="1">满减券</el-radio>
<!--            <el-radio :label="2">折扣券</el-radio>-->
            <el-radio :label="3">无门槛券</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="最低消费金额" prop="min_amount" v-if="form.coupon_type === 1">
          <el-input-number v-model="form.min_amount" :min="0" :precision="2" :step="0.01" placeholder="请输入最低消费金额"></el-input-number>
        </el-form-item>

        <el-form-item label="优惠金额" prop="amount" v-if="form.coupon_type === 1 || form.coupon_type === 3">
          <el-input-number v-model="form.amount" :min="0" :precision="2" :step="0.01" placeholder="请输入优惠金额"></el-input-number>
        </el-form-item>

        <el-form-item label="折扣" prop="discount" v-if="form.coupon_type === 2">
          <el-input-number v-model="form.discount" :min="0" :max="1" :precision="2" :step="0.01" placeholder="请输入折扣(0-1之间)"></el-input-number>
        </el-form-item>

        <el-form-item label="生效时间" prop="timeRange">
          <el-date-picker
            v-model="form.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          >
          </el-date-picker>
        </el-form-item>

<!--        <el-form-item label="发放总数" prop="total_count">-->
<!--          <el-input-number v-model="form.total_count" :min="1" placeholder="请输入发放总数"></el-input-number>-->
<!--        </el-form-item>-->

        <el-form-item label="是否启用" prop="is_enabled">
          <el-switch v-model="form.is_enabled" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发放优惠券对话框 -->
    <el-dialog title="发放优惠券" :visible.sync="distributeDialogVisible" fullscreen>
      <div class="distribute-form">
        <el-form :model="distributeForm" :rules="distributeRules" ref="distributeForm" label-width="100px">
          <el-form-item label="优惠券信息">
            <div class="coupon-info">
              <p><strong>名称：</strong>{{ currentCoupon.coupon_name }}</p>
              <p><strong>类型：</strong>{{ getCouponTypeText(currentCoupon.coupon_type) }}</p>
<!--              <p><strong>剩余数量：</strong>{{ currentCoupon.remain_count || 0 }}</p>-->
            </div>
          </el-form-item>
          
          <el-form-item label="发放方式" prop="distribute_type">
            <el-radio-group v-model="distributeForm.distribute_type">
              <el-radio :label="1">发放给所有用户</el-radio>
              <el-radio :label="2">自定义选择用户</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="选择用户" v-if="distributeForm.distribute_type === 2">
            <div class="tables-container">
              <div v-if="userLoading" class="loading-wrapper">
                <el-alert
                  title="正在加载用户数据..."
                  type="info"
                  :closable="false"
                  show-icon
                />
              </div>

              <div class="selection-info" v-if="distributeForm.selectedUsers.length > 0">
                <el-alert
                    :title="`已选择 ${distributeForm.selectedUsers.length} 个用户`"
                    type="success"
                    :closable="false"
                    show-icon
                />
              </div>

              <div class="user-filter">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="用户类型筛选">
                      <el-select v-model="userFilter.user_type" placeholder="请选择用户类型" clearable @change="loadAllUsers">
                        <el-option label="全部用户" value=""></el-option>
                        <el-option label="普通用户" :value="1"></el-option>
                        <el-option label="商家" :value="2"></el-option>
                        <el-option label="一级分销商" :value="3"></el-option>
                        <el-option label="二级分销商" :value="4"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="状态筛选">
                      <el-select v-model="userFilter.status" placeholder="请选择用户状态" clearable @change="loadAllUsers">
                        <el-option label="全部状态" value=""></el-option>
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="tables-layout">
                <!-- 左侧：所有用户表格 -->
                <div class="table-panel">
                  <div class="panel-header">
                    <h4>所有用户 ({{ allUsers.length }})</h4>
                    <el-input
                      v-model="searchKeyword"
                      placeholder="搜索用户昵称"
                      size="small"
                      prefix-icon="el-icon-search"
                      clearable
                      @input="filterAllUsers"
                      style="width: 200px;"
                    />
                  </div>
                  <el-table
                    :data="filteredAllUsers"
                    v-loading="userLoading"
                    height="350"
                    border
                    @selection-change="handleAllUsersSelectionChange"
                    style="width: 100%"
                    ref="allUsersTable"
                  >
                    <el-table-column fixed="left" type="selection" width="55"></el-table-column>
                    <el-table-column prop="nickname" label="用户昵称" min-width="120">
                      <template slot-scope="scope">
                        <span :title="scope.row.nickname">{{ scope.row.nickname }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120">
                      <template slot-scope="scope">
                        <span :title="scope.row.phone || '无手机号'">{{ scope.row.phone || '无手机号' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="user_type" label="用户类型" width="100">
                      <template slot-scope="scope">
                        <el-tag size="mini" :type="getUserTypeTag(scope.row.user_type)">
                          {{ getUserTypeLabel(scope.row.user_type) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <!-- 中间：操作按钮 -->
                <div class="transfer-buttons">
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-right"
                    @click="addSelectedUsers"
                    :disabled="allUsersSelection.length === 0"
                    size="small"
                  >
                    添加选中
                  </el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-arrow-left"
                    @click="removeSelectedUsers"
                    :disabled="selectedUsersSelection.length === 0"
                    size="small"
                  >
                    移除选中
                  </el-button>
                  <el-button
                    type="success"
                    icon="el-icon-plus"
                    @click="addAllUsers"
                    :disabled="filteredAllUsers.length === 0"
                    size="small"
                  >
                    添加全部
                  </el-button>
                  <el-button
                    type="warning"
                    icon="el-icon-delete"
                    @click="clearSelectedUsers"
                    :disabled="distributeForm.selectedUsers.length === 0"
                    size="small"
                  >
                    清空已选
                  </el-button>
                </div>

                <!-- 右侧：已选择用户表格 -->
                <div class="table-panel">
                  <div class="panel-header">
                    <h4>已选择用户 ({{ distributeForm.selectedUsers.length }})</h4>
                  </div>
                  <el-table
                    :data="selectedUsersData"
                    height="350"
                    border
                    @selection-change="handleSelectedUsersSelectionChange"
                    style="width: 100%"
                    ref="selectedUsersTable"
                  >
                    <el-table-column fixed="left" type="selection" width="55"></el-table-column>
                    <el-table-column prop="nickname" label="用户昵称" min-width="120">
                      <template slot-scope="scope">
                        <span :title="scope.row.nickname">{{ scope.row.nickname }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120">
                      <template slot-scope="scope">
                        <span :title="scope.row.phone || '无手机号'">{{ scope.row.phone || '无手机号' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="user_type" label="用户类型" width="100">
                      <template slot-scope="scope">
                        <el-tag size="mini" :type="getUserTypeTag(scope.row.user_type)">
                          {{ getUserTypeLabel(scope.row.user_type) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>

          </el-form-item>

          <el-form-item label="发放数量" prop="distribute_count">
            <el-input-number 
              v-model="distributeForm.distribute_count" 
              :min="1" 
              placeholder="请输入发放数量"
            ></el-input-number>
<!--            <span class="form-tip">最多可发放 {{ currentCoupon.remain_count || 0 }} 张</span>-->
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="distributeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDistributeSubmit" :loading="distributeLoading">确定发放</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from '@/api'
import crud from "@/mixins/crud";

export default {
  name: 'CouponManagement',
  mixins: [crud],
  data() {
    return {
      request: http.coupon,
      searchList: [
        { label: '优惠券名称', prop: 'coupon_name', name: 'input' },
        { label: '优惠券类型', prop: 'coupon_type', name: 'select', options: [
          { label: '满减券', value: 1 },
          // { label: '折扣券', value: 2 },
          { label: '无门槛券', value: 3 }
        ]}
      ],
      searchParams: {
        coupon_name: '',
        coupon_type: ''
      },
      dialogVisible: false,
      dialogTitle: '新增优惠券',
      form: {
        coupon_name: '',
        coupon_type: 1,
        amount: null,
        discount: null,
        min_amount: null,
        timeRange: [],
        total_count: 100,
        is_enabled: 1
      },
      rules: {
        coupon_name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' }
        ],
        coupon_type: [
          { required: true, message: '请选择优惠券类型', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入优惠金额', trigger: 'blur' }
        ],
        discount: [
          { required: true, message: '请输入折扣', trigger: 'blur' }
        ],
        min_amount: [
          { required: true, message: '请输入最低消费金额', trigger: 'blur' }
        ],
        timeRange: [
          { required: true, message: '请选择生效时间', trigger: 'change' }
        ],
        // total_count: [
        //   { required: true, message: '请输入发放总数', trigger: 'blur' }
        // ]
      },
      distributeDialogVisible: false,
      distributeLoading: false,
      distributeForm: {
        distribute_type: 1,
        user_type: '',
        nickname: '',
        distribute_count: 1,
        selectedUsers: []
      },
      distributeRules: {
        distribute_type: [
          { required: true, message: '请选择发放方式', trigger: 'change' }
        ],
        distribute_count: [
          { required: true, message: '请输入发放数量', trigger: 'blur' }
        ]
      },
      currentCoupon: {},
      userLoading: false,
      allUsers: [],
      userFilter: {
        user_type: '',
        status: ''
      },
      searchKeyword: '',
      allUsersSelection: [],
      selectedUsersSelection: []
    }
  },
  watch: {
    'distributeForm.distribute_type': {
      handler(newVal) {
        if (newVal === 2) {
          this.loadAllUsers()
        } else {
          this.allUsers = []
          this.searchKeyword = ''
          this.allUsersSelection = []
          this.selectedUsersSelection = []
        }
      },
      immediate: false
    }
  },
  computed: {
    // 过滤后的所有用户
    filteredAllUsers() {
      if (!this.searchKeyword) {
        return this.allUsers
      }
      return this.allUsers.filter(user => 
        user.nickname.toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
    },
    
    // 已选择用户的完整数据
    selectedUsersData() {
      return this.allUsers.filter(user => 
        this.distributeForm.selectedUsers.includes(user.id)
      )
    }
  },
  methods: {
    // 获取优惠券类型文本
    getCouponTypeText(type) {
      const typeMap = {
        1: '满减券',
        2: '折扣券',
        3: '无门槛券'
      }
      return typeMap[type] || '未知类型'
    },

    // 获取优惠券类型标签颜色
    getCouponTypeTag(type) {
      const tagMap = {
        1: 'primary',
        2: 'success',
        3: 'warning'
      }
      return tagMap[type] || 'info'
    },

    // 新增
    onAdd() {
      this.dialogTitle = '新增优惠券'
      this.dialogVisible = true
      this.form = {
        coupon_name: '',
        coupon_type: 1,
        amount: null,
        discount: null,
        min_amount: null,
        timeRange: [],
        total_count: 100,
        is_enabled: 1
      }
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },

    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑优惠券'
      this.dialogVisible = true
      this.form = {
        id: row.id,
        coupon_name: row.coupon_name,
        coupon_type: row.coupon_type,
        amount: row.amount,
        discount: row.discount,
        min_amount: row.min_amount,
        timeRange: [row.start_time, row.end_time],
        total_count: row.total_count,
        is_enabled: row.is_enabled
      }
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },

    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            ...this.form,
            start_time: this.form.timeRange[0],
            end_time: this.form.timeRange[1]
          }
          delete data.timeRange

          if (this.form.id) {
            // 编辑
            this.request.update(this.form.id, data).then(() => {
              this.$message.success('更新成功')
              this.dialogVisible = false
              this.onSearch()
            })
          } else {
            // 新增
            this.request.create(undefined,data).then(() => {
              this.$message.success('添加成功')
              this.dialogVisible = false
              this.onSearch()
            })
          }
        }
      })
    },

    // 切换状态
    handleToggleStatus(row) {
      const action = row.is_enabled ? '禁用' : '启用'
      this.$confirm(`确认${action}该优惠券吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.update(row.id, { is_enabled: row.is_enabled ? 0 : 1 }).then(() => {
          this.$message.success(`${action}成功`)
          this.onSearch()
        })
      }).catch(() => {})
    },

    // 删除
    handleDelete(row) {
      this.$confirm('确认删除该优惠券吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete(row.id).then(() => {
          this.$message.success('删除成功')
          this.onSearch()
        })
      }).catch(() => {})
    },

    // 跳转到用户优惠券列表
    goToUserCoupon() {
      this.$router.push('/coupon/user-list')
    },

    // 发放优惠券
    handleDistribute(row) {
      this.currentCoupon = row
      this.distributeDialogVisible = true
      this.distributeForm = {
        distribute_type: 1,
        user_type: '',
        nickname: '',
        distribute_count: 1,
        selectedUsers: []
      }
      this.allUsers = []
      this.userFilter = {
        user_type: '',
        status: ''
      }
      this.searchKeyword = ''
      this.allUsersSelection = []
      this.selectedUsersSelection = []
      this.$nextTick(() => {
        this.$refs.distributeForm && this.$refs.distributeForm.clearValidate()
      })
    },

    // 加载所有用户（用于穿梭框）
    loadAllUsers() {
      this.userLoading = true
      const params = {
        pageNo: 1,
        pageSize: 1000, // 获取更多用户数据用于穿梭框
        user_type: this.userFilter.user_type,
        status: this.userFilter.status
      }
      
      http.user.list(params).then(response => {
        this.allUsers = (response.data || []).map(user => ({
          ...user,
          key: user.id, // 为穿梭框添加key属性
          label: user.nickname // 为穿梭框添加label属性
        }))
        this.userLoading = false
        
        if (this.allUsers.length === 0) {
          this.$message.info('没有找到符合条件的用户')
        }
      }).catch((error) => {
        this.userLoading = false
        this.$message.error('加载用户数据失败：' + (error.message || '未知错误'))
      })
    },

    // 处理用户选择（已移除，使用穿梭框的v-model）
    handleUserSelectionChange(selection) {
      // 这个方法不再需要，穿梭框会自动处理选中状态
    },

    // 处理提交
    handleDistributeSubmit() {
      this.$refs.distributeForm.validate((valid) => {
        if (valid) {
          if (this.distributeForm.distribute_type === 2 && this.distributeForm.selectedUsers.length === 0) {
            this.$message.warning('请选择要发放的用户')
            return
          }
          
          this.distributeLoading = true
          const data = {
            coupon_id: this.currentCoupon.id,
            distribute_type: this.distributeForm.distribute_type,
            distribute_count: this.distributeForm.distribute_count
          }
          
          if (this.distributeForm.distribute_type === 2) {
            data.user_ids = this.distributeForm.selectedUsers
          }
          
          http.coupon.distribute(data).then((response) => {
            this.$message.success(response.message || '发放成功')
            this.distributeDialogVisible = false
            this.onSearch()
          }).catch((error) => {
            this.$message.error(error.message || '发放失败')
          }).finally(() => {
            this.distributeLoading = false
          })
        }
      })
    },

    // 获取用户类型标签颜色
    getUserTypeTag(type) {
      const tagMap = {
        1: 'info',
        2: 'warning', 
        3: 'success',
        4: 'primary'
      }
      return tagMap[type] || 'info'
    },

    // 获取用户类型标签文本
    getUserTypeLabel(type) {
      const labelMap = {
        1: '普通用户',
        2: '商家',
        3: '一级分销商',
        4: '二级分销商'
      }
      return labelMap[type] || '未知类型'
    },

    // 过滤所有用户
    filterAllUsers() {
      // 搜索功能通过计算属性实现
    },

    // 处理所有用户表格的选择变化
    handleAllUsersSelectionChange(selection) {
      this.allUsersSelection = selection
    },

    // 添加选中的用户到已选择列表
    addSelectedUsers() {
      const selectedIds = this.allUsersSelection.map(user => user.id)
      const newSelectedIds = [...new Set([...this.distributeForm.selectedUsers, ...selectedIds])]
      this.distributeForm.selectedUsers = newSelectedIds
      
      // 清空选择
      this.$refs.allUsersTable && this.$refs.allUsersTable.clearSelection()
      this.allUsersSelection = []
      
      this.$message.success(`已添加 ${selectedIds.length} 个用户`)
    },

    // 从已选择列表中移除选中的用户
    removeSelectedUsers() {
      const selectedIds = this.selectedUsersSelection.map(user => user.id)
      this.distributeForm.selectedUsers = this.distributeForm.selectedUsers.filter(
        id => !selectedIds.includes(id)
      )
      
      // 清空选择
      this.$refs.selectedUsersTable && this.$refs.selectedUsersTable.clearSelection()
      this.selectedUsersSelection = []
      
      this.$message.success(`已移除 ${selectedIds.length} 个用户`)
    },

    // 添加所有过滤后的用户
    addAllUsers() {
      const allIds = this.filteredAllUsers.map(user => user.id)
      const newSelectedIds = [...new Set([...this.distributeForm.selectedUsers, ...allIds])]
      this.distributeForm.selectedUsers = newSelectedIds
      
      this.$message.success(`已添加所有 ${allIds.length} 个用户`)
    },

    // 清空已选择的用户
    clearSelectedUsers() {
      this.distributeForm.selectedUsers = []
      this.selectedUsersSelection = []
      
      this.$message.success('已清空所有选择的用户')
    },

    // 处理已选择用户表格的选择变化
    handleSelectedUsersSelectionChange(selection) {
      this.selectedUsersSelection = selection
    }
  }
}
</script>

<style scoped lang="scss">
.table-handle {
  margin-bottom: 20px;
}

.page-box {
  margin-top: 20px;
  text-align: right;
}

.distribute-form {
  .coupon-info {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    
    p {
      margin: 5px 0;
      color: #606266;
      
      strong {
        color: #303133;
      }
    }
  }

  .pagination-wrapper {
    margin-top: 20px;
    text-align: right;
  }

  .form-tip {
    margin-left: 10px;
    color: #909399;
    font-size: 12px;
  }
  
  .user-filter {
    margin-bottom: 20px;
  }

  .tables-container {
    margin-bottom: 20px;
    
    .loading-wrapper {
      margin-bottom: 15px;
    }
  }

  .tables-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .table-panel {
    flex: 1;
    min-width: 0; // 防止flex子项溢出
    
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 0 5px;
      
      h4 {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        margin: 0;
      }
    }
  }

  .transfer-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    min-width: 120px;
    
    .el-button {
      width: 100%;
      min-width: 100px;
      margin: 0;
    }
  }

  .selection-info {
    margin: 15px 0;
  }
  
  // 响应式设计
  @media (max-width: 1200px) {
    .tables-layout {
      gap: 15px;
    }
    
    .transfer-buttons {
      min-width: 100px;
      
      .el-button {
        min-width: 90px;
        font-size: 12px;
        padding: 8px 12px;
      }
    }
  }
  
  @media (max-width: 768px) {
    .tables-layout {
      flex-direction: column;
      gap: 15px;
    }
    
    .table-panel {
      .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        
        h4 {
          font-size: 13px;
        }
      }
    }
    
    .transfer-buttons {
      flex-direction: row;
      justify-content: center;
      padding: 10px;
      min-width: auto;
      
      .el-button {
        width: auto;
        min-width: 80px;
        font-size: 11px;
        padding: 6px 10px;
      }
    }
  }
  
  // 确保内容不溢出
  .el-table {
    .el-table__body-wrapper {
      overflow-y: auto;
    }
    
    .el-table__header-wrapper {
      overflow-x: auto;
    }
  }
  
  // 修复可能的布局问题
  .el-table {
    width: 100%;
    table-layout: fixed;
  }
  
  // 确保用户项内容正确显示
  .el-table .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style> 